<template>
	<div class="uiue-card">
		<div class="tit">附件</div>
		<a-form ref="formRef" :model="formData" layout="vertical" class="form-box" hideRequiredMark>
			<a-row :gutter="12">
				<a-col :span="6">
					<a-form-item name="planeFile">
						<template v-slot:label>
							<div class="labelCla">项目计划书</div>
							<a-button class="upload-tem" type="link" :loading="loading"
								@click.prevent="uploadTem('项目计划书')">下载模板</a-button>
						</template>

						<a-upload v-model:file-list="fileList1" :accept="fileType" :before-upload="beforeUploadFile"
							:customRequest="customRequestSym" @change="planeFileChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
							<div class="font">支持文件大小30M</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="testResFile">
						<template v-slot:label>
							<div class="labelCla">测试环境测试报告</div>
							<a-button class="upload-tem" type="link" :loading="loading"
								@click.prevent="uploadTem('测试环境测试报告')">下载模板</a-button>
						</template>
						<a-upload v-model:file-list="fileList2" :accept="fileType" :before-upload="beforeUploadFile"
							:customRequest="customRequestSym" @change="testResFileChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
							<div class="font">支持文件大小30M</div>
							<div class="font">生产环境提供应用测试环境灰度测试报告</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="testResFile">
						<template v-slot:label>
							<div class="labelCla">生产环境测试报告</div>
							<a-button class="upload-tem" type="link" :loading="loading"
								@click.prevent="uploadTem('生产环境测试报告')">下载模板</a-button>
						</template>
						<a-upload v-model:file-list="fileList5" :accept="fileType111" :before-upload="beforeUploadFile"
							:customRequest="customRequestSym" @change="prodResFileChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType111 }}</div>
							<div class="font">支持文件大小30M</div>
							<div class="font">
								发起人环节:需要上传《联通办公测试环境灰度测试报告》变更应用需要上传《XXXX应用安扫报告》《联通办公生产环境上线测试报告》提交上线材料环节:需要补充《联通办公生产环境灰度测试报告》、《xXX应用安扫报告》
							</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="testResFile">
						<template v-slot:label>
							<div class="labelCla">安全扫描报告</div>
							<a-button class="upload-tem" type="link" :loading="loading"
								@click.prevent="uploadTem('安全扫描报告')">下载模板</a-button>
						</template>
						<a-upload v-model:file-list="fileList6" :accept="fileType111" :before-upload="beforeUploadFile"
							:customRequest="customRequestSym" @change="securResFileChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType111 }}</div>
							<div class="font">支持文件大小30M</div>
							<div class="font">
								要求:1.没有中高风险漏洞;2.在应用上线日在内1个月之内的安扫;3.扫描应用所在所在生产环境服务器
							</div>
						</a-upload>
					</a-form-item>
				</a-col>

			</a-row>
			<a-row :gutter="12">
				<a-col :span="6">
					<a-form-item name="networkConnFile">
						<template v-slot:label>
							<div class="labelCla">网络打通结果</div>
						</template>
						<a-upload v-model:file-list="fileList3" list-type="picture" class="upload-list-inline"
							:before-upload="beforeUploadjg" :accept="fileImgType" :customRequest="customRequest"
							@change="networkConnFileChange" @remove="remove">
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
							<div class="font">图片大小不超过300K</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="appStoreImgFile">
						<template v-slot:label>
							<div class="labelCla">移动端应用界面截图</div>
						</template>
						<a-upload v-model:file-list="fileList4" list-type="picture" class="upload-list-inline"
							:before-upload="beforeUpload" :accept="fileImgType" :customRequest="customRequestStroe"
							@change="appStoreImgFileChange" @remove="remove">
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
							<div class="font">图片大小不超过300K</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="appStoreImgFile">
						<template v-slot:label>
							<div class="labelCla">其他截图</div>
						</template>
						<a-upload v-model:file-list="fileList7" list-type="picture" class="upload-list-inline"
							:before-upload="beforeUploadjg" :accept="fileImgType" :customRequest="customRequestStroe"
							@change="otherImgFileChange" @remove="remove">
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
							<div class="font">图片大小不超过300K</div>
							<div class="font">1.带有返回联通办公按钮的截图;2.带有应用反馈联系方式截图</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>
			<!-- <div class="tit1">需上传的附件为：</div>
			<div class="tit2">
				1.项目计划书：《项目计划书--XXX应用》，《项目需求说明书--XXX应用》2.测试结果：《安全扫描报告--XXX应用》3.网络结果：应用服务器与移动端服务器访问成功截图，应用服务器与门户端服务器访问成功截图4.应用截图：应用移动端使用界面3张截图；
			</div>
			<div class="tit2">
				{{ str }}
			</div> -->
		</a-form>
	</div>
</template>

<script setup name="AnnexForm">
import fileApi from '@/api/dev/fileApi'
import tool from '@/utils/tool'
import other from '@/utils/other'
import { message } from 'ant-design-vue'
import store from "@/store";
import { useRoute } from 'vue-router'
const route = useRoute()
const { isImport } = route.query
const fileType = '.doc,.docx,.xlsx,.xls,.pdf,.zip,.rar,.ppt,.pptx'
const fileType111 = '.doc,.docx,.xlsx,.xls,.pdf,.zip,.rar'
const fileImgType = '.jpg,.png,.jpeg'
const fileUrl = import.meta.env.VITE_FILE_URL
const currentName = inject('currentName')

const str = computed(() => {
	let strss =
		currentName?.value === '提交上线材料'
			? '需要补充材料：2.测试结果：《智慧门户测试环境应用上线测试报告》、《智慧门户生产环境应用上线测试报告》、《智慧门户测试环境应用变更测试报告》、《智慧门户生产环境应用变更测试报告》、《联通办公测试环境应用灰度测试报告--XXX应用》、《联通办公生产环境应用灰度测试报告--XXX应用》、《联通办公测试环境应用上线测试报告--XXX应用》、《联通办公生产环境应用上线测试报告--XXX应用》、《安扫报告--XXX应用》《联通办公测试环境应用变更测试报告--XXX应用》、《联通办公生产环境应用变更测试报告--XXX应用》4.应用截图：应用内部带有应用联系人界面截图、应用内部带有返回移动端按钮界面截图、应用内部带有胶囊位界面截图、网络支持HTTP协议1.1版本的界面截图、应用具备待办待阅功能截图'
			: ''
	return strss
})
const formRef = ref()
const loading = computed(() => store.state.approval.loading)

// 表单数据
const formData = reactive({
	planeFile: [], // 项目计划书
	testResFile: [], // 测试环境报告
	networkConnFile: [], // 网络打通结果
	appStoreImgFile: [], // 应用商店截图
	productionEnvironmentReport: [], // 生产环境报告
	securityScanReport: [], // 安全扫描报告
	otherScreenshots: [], // 其他截图
})
// 默认要校验的
const formRules = reactive({
	planeFile: [{ required: true, message: '请上传项目计划书', trigger: 'blur' }],
	testResFile: [{ required: true, message: '请上传测试环境结果', trigger: 'blur' }],
	networkConnFile: [{ required: true, message: '请上传网络打通结果', trigger: 'blur' }],
	appStoreImgFile: [{ required: true, message: '请上传应用商店截图', trigger: 'blur' }]
})
const fileList1 = ref([])
const fileList2 = ref([])
const fileList3 = ref([])
const fileList4 = ref([])
const fileList5 = ref([])
const fileList6 = ref([])
const fileList7 = ref([])

const handleRemove = (file) => {
	console.log(file)
}

/*变更编辑  开始*/
const editDate = inject('editDate')
const fileHandle = (fileList) => {
	const file = fileList ? JSON.parse(fileList) : []
	file.map((item) => {
		if (item.url) {
			item.url = item.url.includes('http') ? item.url : `${fileUrl}/${item.url}`
		} else {
			// old
			item = `${fileUrl}/${item}`
		}
		return item
	})
	return file
}
if (editDate?.value) {
	if (editDate.value.planeFile) fileList1.value = fileHandle(editDate.value.planeFile)
	if (editDate.value.testResFile) fileList2.value = fileHandle(editDate.value.testResFile)
	if (editDate.value.networkConnFile) fileList3.value = fileHandle(editDate.value.networkConnFile)
	// 存量里面脏数据 无法判断
	if (editDate.value.appStoreImgFile) fileList4.value = fileHandle(editDate.value.appStoreImgFile)
	if (editDate.value?.productionEnvironmentReport) fileList5.value = fileHandle(editDate.value.productionEnvironmentReport)
	if (editDate.value?.securityScanReport) fileList6.value = fileHandle(editDate.value.securityScanReport)
	if (editDate.value?.otherScreenshots) fileList7.value = fileHandle(editDate.value.otherScreenshots)

	Object.keys(formData).forEach((key) => {
		formData[key] = editDate.value[key] ? JSON.parse(editDate.value[key]) : []
	})
}
const props = defineProps({
	importOk: Boolean,
	isup: Boolean

})
// 导入成功
watch(() => props.importOk, (newData) => {
	if (newData) {
		let datas = store.state.appinfo.importData
		if (datas.planeFile) fileList1.value = fileHandle(datas.planeFile)
		if (datas.testResFile) fileList2.value = fileHandle(datas.testResFile)
		if (datas.networkConnFile) fileList3.value = fileHandle(datas.networkConnFile)
		// 存量里面脏数据 无法判断
		if (datas.appStoreImgFile) fileList4.value = fileHandle(datas.appStoreImgFile)
		if (datas?.productionEnvironmentReport) fileList5.value = fileHandle(datas.productionEnvironmentReport)
		if (datas?.securityScanReport) fileList6.value = fileHandle(datas.securityScanReport)
		if (datas?.otherScreenshots) fileList7.value = fileHandle(datas.otherScreenshots)
		Object.keys(formData).forEach((key) => {
			formData[key] = datas[key] ? JSON.parse(datas[key]) : []
		})
	}
})

/*应用商店截图*/
const beforeUpload = (file) => {
	const isLt = file.size / 1024 < 300
	if (fileList4.value.length >= 3) {
		return false
	}
	if (!isLt) {
		return false
	}
	return true
}
const beforeUploadjg = (file) => {
	const isLt = file.size / 1024 < 300
	return isLt
}

const planeFileChange = (info) => {
	handleChange(info, 'planeFile')
}
const testResFileChange = (info) => {
	handleChange(info, 'testResFile')
}
const prodResFileChange = (info) => {
	handleChange(info, 'productionEnvironmentReport')
}
const securResFileChange = (info) => {
	handleChange(info, 'securityScanReport')
}
const networkConnFileChange = (info) => {
	handleChange(info, 'networkConnFile')
}
const appStoreImgFileChange = (info) => {
	handleChange(info, 'appStoreImgFile')
}
const otherImgFileChange = (info) => {
	handleChange(info, 'otherScreenshots')
}
const handleChange = (info, key) => {
	const { response, name, status, url, size } = info.file
	const isLt = size / 1024 < 300
	let resFileList = [...info.fileList];
	if (key === 'networkConnFile' && !isLt && status !== 'removed') {
		message.warning('图片大小不超过300K')
		fileList3.value = resFileList.slice(0, resFileList.length - 1);
		return false
	}
	if (key === 'appStoreImgFile' && resFileList.length > 3 && status !== 'removed') {
		message.warning('不能超过三张')
		fileList4.value = resFileList.slice(0, resFileList.length - 1);
		return false
	}
	if (key === 'appStoreImgFile' && !isLt && status !== 'removed') {
		message.warning('图片大小不超过300K')
		fileList4.value = resFileList.slice(0, resFileList.length - 1);
		return false
	}
	if (key === 'otherScreenshots' && !isLt && status !== 'removed') {
		message.warning('图片大小不超过300K')
		fileList7.value = resFileList.slice(0, resFileList.length - 1);
		return false
	}
	// 添加
	if (status === 'done') {
		if (response) {
			formData[key].push({
				name,
				url: response
			})
		}
	}

	// 删除
	if (status === 'removed') {
		let index
		if (response) {
			// 删除刚上传的
			index = formData[key].findIndex((item) => response === item.url)
		} else {
			// 删除后台返回的已经上传的
			index = formData[key].findIndex((item) => url.includes(item.url))
		}
		if (index > -1) {
			formData[key].splice(index, 1)
		}
	}
}

const remove = (file) => {
	// 只有移动端上线并且是老数据的时候才拦截
	if (props.isup && file.url && file.url.includes('http')) {
		message.warning('不能删除原始附件')
		return false
	}
}
const beforeUploadFile = (file) => {
	const isLt = file.size / 1024 < 30 * 1024
	if (!isLt) {
		message.error('文件大小不超过30M')
	}
	return isLt
}

// 自定义上传
const customRequestSym = (file) => {
	// 后端需要接受的参数是 formData数据，
	const form = new FormData()
	form.append('file', file.file)
	fileApi.fileUploadAliyunReturnUrlSym(form).then((res) => {
		file.onSuccess(res, file.file)
		file.status = 'done'
	})
}

// 自定义上传
const customRequest = (file) => {
	// 后端需要接受的参数是 formData数据，
	const form = new FormData()
	form.append('file', file.file)
	fileApi.fileUploadAliyunReturnUrl(form).then((res) => {
		file.onSuccess(res, file.file)
		file.status = 'done'
	})
}
// 应用商店自定义上传（不带权限）
const customRequestStroe = (file) => {
	// 后端需要接受的参数是 formData数据，
	const form = new FormData()
	form.append('file', file.file)
	fileApi.uploadCosReturnUrlPub(form).then((res) => {
		file.onSuccess(res, file.file)
		file.status = 'done'
	})
}
// 表单验证
const handleValidate = () => {
	return new Promise((resolve, reject) => {
		resolve(formData)
		// formRef.value
		// 	.validate()
		// 	.then(() => {
		// 		console.log('成功')
		// 		resolve(formData)
		// 	})
		// 	.catch(() => {
		// 		console.log('失败')
		// 		resolve(false)
		// 	})
	})
}
const uploadTem = (name) => {
	other.downloadFile(name)
}

defineExpose({
	handleValidate
})
</script>

<style lang="less" scoped>
.tit {
	color: rgb(40, 40, 40);
	font-family: PingFang SC;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0px;
	text-align: left;
}

.form-box {
	margin-top: 14px;
	padding: 0 18px;

	&-inp {
		border-radius: 4px;
		border: 1px solid rgb(206, 206, 206);
	}

	.labelCla {
		color: rgb(40, 40, 40);
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 600;
		line-height: 28px;
		letter-spacing: 0px;
		text-align: left;
	}

	.upload-tem {
		color: #326eff;
		margin-left: 8px;
	}

	.font {
		color: rgb(150, 150, 150);
		font-size: 12px;
		line-height: 20px;
		margin-top: 6px;
	}

	.uploadBtn {
		width: 104px;
		height: 104px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fafafa;
		border: 1px dashed #d9d9d9;
		border-radius: 2px;
		cursor: pointer;
		transition: border-color 0.3s ease;
	}

	.tit1 {
		color: rgb(89, 89, 89);
		font-size: 12px;
	}

	.tit2 {
		color: rgb(150, 150, 150);
		font-size: 12px;
	}
}


.uploadBtn:hover {
	border-color: var(--primary-color);
}
</style>
<style>
.ant-upload-select-picture-card i {
	font-size: 32px;
	color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
	margin-top: 8px;
	color: #666;
}
</style>
<style scoped>
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
	float: left;
	width: 182px;
	margin-right: 8px;
}

.upload-list-inline :deep(.ant-upload-animate-enter) {
	animation-name: uploadAnimateInlineIn;
}

.upload-list-inline :deep(.ant-upload-animate-leave) {
	animation-name: uploadAnimateInlineOut;
}
</style>
